import React, { PureComponent, useRef } from 'react';
import { Button, Table, Radio, Modal, Form, Input, Checkbox } from "antd";
import { flushSync } from 'react-dom';
import PropTypes from 'prop-types';
import { getCompany, queryrisklist } from "@/request/api.js";
// 类组件=》动态组件
class classCom extends PureComponent {
    constructor(props) {
        console.log('@1=>实例化组件');
        super(props);
        this.state = {
            num: 0,
            companys: [],
            columns: [
                {
                    title: '险种名称',
                    dataIndex: 'riskName',
                    key: 'riskName',
                },
                {
                    title: '创建人',
                    dataIndex: 'createUserName',
                    key: 'createUserName',
                },
            ],
            data: [],
            value: '',
            isModalOpen: false,
            formRef: React.createRef()
        }

    }

    render () {
        console.log('READER');
        return (
            <div className='class-com'>
                <h2>{this.props.title}</h2>
                <div>
                    {this.state.num}
                </div>
                {/* setState 是异步的 使用flushSync就变成同步了 设置一次render一次*/}
                <Button type="primary" onClick={() => {
                    flushSync(() => {
                        this.setState({ num: this.state.num + 1 })

                    })
                    // this.setState({ num: 30 })
                    // this.setState({ num: 40 })
                    // this.setState({ num: 50 })
                }}>增加</Button>
                <hr />
                <Radio.Group defaultValue="a" buttonStyle="solid" onChange={this.radioChange} value={this.state.value}>
                    {
                        this.state.companys.map((com, index) => {
                            return <Radio.Button key={index} value={com.companyCode}>{com.name}</Radio.Button>
                        })
                    }
                </Radio.Group>
                <Button type="primary" onClick={this.openTan}>新增</Button>
                <Table columns={this.state.columns} dataSource={this.state.data} size='small' bordered rowKey="id" style={{ marginTop: 20 }}></Table>
                <Modal title="Basic Modal" open={this.state.isModalOpen} onOk={this.handleOk} onCancel={this.handleCancel}>
                    <Form
                        ref={this.state.formRef}
                        name="basic"
                        labelCol={{
                            span: 8,
                        }}
                        wrapperCol={{
                            span: 16,
                        }}
                        style={{
                            maxWidth: 600,
                        }}
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={this.onFinish}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="Username"
                            name="username"
                            rules={[
                                {
                                    required: true,
                                    message: '必填!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="Password"
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: '必填',
                                },
                            ]}
                        >
                            <Input.Password />
                        </Form.Item>
                        <Form.Item
                            wrapperCol={{
                                offset: 8,
                                span: 16,
                            }}
                        >
                            <Button type="primary" htmlType="submit">
                                Submit
                            </Button>
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        );
    }
    // 单选框change事件
    radioChange = (event) => {
        this.setState({ value: event.target.value })
        this.getTableList(event.target.value)
    }

    openTan = () => {
        flushSync(()=>{

            this.setState({ isModalOpen: true })
        })
        console.log(this.state.formRef.current);
        this.state.formRef.current.setFieldsValue({
            username:'username',
            password:'password'
        });
    }

    handleOk = () => {
        this.handleCancel()
    }
    handleCancel = () => {
        this.setState({ isModalOpen: false })
        this.state.formRef.current.resetFields();

    }
    // 提交表单且数据验证成功后回调事件	
    onFinish = (values) => {
        console.log('Success:', values);
    }
    /* 获取表格数据 */
    getTableList = (value = null) => {
        queryrisklist({ "pageSize": 10, "pageNum": 1, "insuranceCode": value }).then(res => {
            if (+res.code === 200) {
                this.setState({ data: res.data.records })
            }
        })
    }
    // static getderivedStateFromProps = (props, state) => {
    //     console.log('@2=>触发的第二个生命周期');
    //     return null;
    // }
    // 不安全钩子 UNSAFE_不警告
    UNSAFE_componentWillMount = () => {
        console.log('@2=>触发的第二个生命周期，组件挂载render前', document.getElementsByClassName('class-com'), this.props);
    }
    componentDidMount = () => {
        console.log('@3=>触发的第三个生命周期，组件挂载后监听事件；获取到真实 DOM；请求后台接口');
        getCompany().then(res => {
            if (+res.code === 200) {
                this.setState({ companys: res.data.slice(0, 5), value: res.data.slice(0, 5)[0].companyCode })
                this.getTableList(res.data.slice(0, 5)[0].companyCode)
            }
        })

    }
    // shouldComponentUpdate = (nextProps, nextState) => {
    //     console.log('组件更新前，判断组件是否需要更新');
    //     return true;
    // }
    componentDidUpdate = () => {
        console.log('组件更新后，更新后获取到真实 DOM');

    }
    componentWillUnmount = () => {
        console.log('组件将要卸载');
    }
    // 默认值
    static defaultProps = {
        title: '默认值'
    }
    // 类型校验
    static propTypes = {
        title: PropTypes.string.isRequired
    }
}

export default classCom;